<template>
      <div class="content list">
        <div class="list-title">API List</div>
        <div class="list-tree hide-scroll-bar"  v-loading="ApiListLoading">
          <el-tree
            :data="filteredData"
            class="tree-lis-api"
            :props="{ children: 'children', label: 'name' }"
            @node-click="clickApiListItem"
          ></el-tree>
        </div>
      </div>
</template>

<script>
import bus from './apitoolbus'

export default {
  data() {
    return {
      apiLists: [],
      requestInfo: {
      },
      ApiListLoading: false
    }
  },
  created() {
    this.getApiListData()
  },
  computed: {
    filteredData() {
      let arr = this.filterData(this.apiLists) || [];
      this.$nextTick(() => {
        if (arr.length > 0) {
          bus.$emit('requestHandle',arr[0].children[0])
        }
      })
      return this.filterData(this.apiLists);
    }
  },
  methods: {
    filterData(data) {
      return data.filter(item => {
      if (item.deleteOpen) {
        if (item.children) {
          item.children = this.filterData(item.children);
        }
        return true;
      } else {
        return false;
      }
    });

    },
    getApiListData() {
      const params = {}
      this.ApiListLoading = true
      this.$interface.apiManager
        .getQACheckApiListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.apiLists = res.data
          this.ApiListLoading = false
        })
        .catch(() => {
          this.ApiListLoading = false
        })
    },
    clickApiListItem(item) {
      this.requestInfo = Object.assign({}, item)
      bus.$emit('requestHandle',this.requestInfo)
    }
  },
  destroyed() {
    bus.$off("requestHandle");
  },
}
</script>

<style scoped lang="scss">
// @import './index.scss';
@import "src/views/modules/mspbots/dataset-qa-check/index.scss";
</style>

